<template>
  <div><!-- 面包屑 -->
    <el-breadcrumb separator="/">
<<<<<<< HEAD
      <el-breadcrumb-item :to="{ path: '/nav' }">组织管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/nav/roles">靶场管理</a></el-breadcrumb-item>
=======
      <el-breadcrumb-item :to="{ path: '/nav' }">靶场管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/nav/rangesList">靶场列表</a></el-breadcrumb-item>
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
    </el-breadcrumb>
  </div>
  <!-- 搜索 -->
  <div class="user-content">
    <div class="item">
<<<<<<< HEAD
     
      <el-input v-model="formInline.user" placeholder="Approved by" />

      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>

      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>

      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>

      <button class="btn">搜索</button>
      <button class="btn1">重置</button>
    </div>
    <!-- 搜索下的按钮 -->
    <div class="newAdd">
      <button @click="dialog = true" class="btn">新增角色</button>
      <!-- 新增角色弹出框 -->
      <el-drawer ref="drawerRef" v-model="dialog" title="新增角色" :before-close="handleClose" direction="rtl"
        class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form" :rules="rules">
            <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色描述" prop="miao" :label-width="formLabelWidth">
              <el-input v-model="form.region" placeholder="请输入角色描述">
              </el-input>
            </el-form-item>
            <el-form-item label="权限选择" prop="miao" :label-width="formLabelWidth">
            <el-tree :data="data1" show-checkbox node-key="id" :props="defaultProps" />
          </el-form-item>
            
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick">{{
              loading ? '提交中' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- 表格 -->
    <div class="list-item">
      <el-table :data="data" style="width: 100%">
        <el-table-column prop="roleName" label="用户名称" width="180" />
        <el-table-column prop="description" label="角色描述" width="180" />
        <el-table-column prop="permissions[0].permissionName" label="拥有的权限" width="180" />
        <el-table-column prop="createDate" label="创建时间" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="dialog1 = true">编辑</el-button>
=======
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="靶场名称：">
          <el-input v-model="formInline.name" placeholder="请输入靶场名称" />
        </el-form-item>
        <el-form-item label="难度：">
          <el-select v-model="formInline.degree.name" placeholder="请选择难度" style="width: 135px;">
            <el-option v-for="item in degree" :label="item.name" :value="item.name" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属分类：">
          <el-select v-model="formInline.classify.name" placeholder="请选择分类" style="width: 135px;">
            <el-option v-for="item in classify" :label="item.name" :value="item.name" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型：">
          <el-select v-model="formInline.ftype.name" placeholder="请选择文件类型" style="width: 135px;">
            <el-option v-for="item in ftype" :label="item.name" :value="item.name" :key="item.id" />
          </el-select>
        </el-form-item>

      </el-form>
      <button class="btn" @click="search">搜索</button>
          <button class="btn1" @click="setTing">重置</button>

    </div>
    <!-- 搜索下的按钮 -->
    <div class="newAdd">
      <button @click="goRangesForm()" class="btn2">新增靶场</button>

    </div>
    <!-- 表格 -->
    <div class="list-item">
      <el-table :data="data.rangesdata" style="width: 100%">
        <el-table-column prop="name" label="靶场名称" width="180" />
        <el-table-column prop="degree.image" label="靶场图片" width="180" />
        <el-table-column prop="degree.name" label="难度" width="180" />
        <el-table-column prop="classify.name" label="所属分类" width="180" />
        <el-table-column prop="ftype.name" label="文件类型" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary">查看</el-button>
            <el-button size="small" type="primary" @click="handleDelete(scope.row)">编辑</el-button>
            <el-button size="small">删除</el-button>
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
          </template>
        </el-table-column>
      </el-table>
    </div>

<<<<<<< HEAD
  </div>
      <!-- 编辑弹出框 -->
      <el-drawer ref="drawerRef" v-model="dialog1" title="编辑角色" :before-close="handleClose1" direction="rtl"
      class="demo-drawer">
      <div class="demo-drawer__content">
        <el-form :model="form" :rules="rules">
          <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色描述" prop="miao" :label-width="formLabelWidth">
            <el-input v-model="form.region" placeholder="请输入角色描述">
            </el-input>
          </el-form-item>
          <el-form-item label="权限选择" prop="miao" :label-width="formLabelWidth">
            <el-tree :data="data1" show-checkbox node-key="id" :props="defaultProps" />
          </el-form-item>

        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm1">取消</el-button>
          <el-button type="primary" :loading="loading" @click="onClick">{{
            loading ? '提交中' : '提交'
          }}</el-button>
        </div>
      </div>
    </el-drawer>
</template>

<!-- 
  默认展开的节点的 key 的数组
              :default-expanded-keys="[2, 2]"
              默认勾选的节点的 key 的数组
            :default-checked-keys="[5]"
 -->
<script lang='ts' setup>

import { reactive, ref } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'


const defaultProps = {
  children: 'children',
  label: 'label',
}


//数据列表的假数据
const data: DataType[] = [
  {
    key: '1',
    roleName: '老师',
    description: "xxxxx",
    createDate: "2018-01-12",
    permissions: [{ permissionName: "新增用户" }, {
      permissionName:
        "修改用户"
    }]
  },
  {
    key: '2',
    roleName: '老师',
    description: "xxxxx",
    createDate: "2018-01-12",
    permissions: [{ permissionName: "新增用户" }, {
      permissionName:
        "修改用户"
    }]
  },
  {
    key: '3',
    roleName: '学生',
    createDate: "2018-01-12",
    permissions: [{ permissionName: "新增用户" }, {
      permissionName:
        "修改用户"
    }]
  },
];

//树形控件el-tree中的数据
const data1 = [
  {
    id: 1,
    label: '组织管理',
    children: [
      {
        id: 4,
        label: '用户管理',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
      {
        id: 4,
        label: '角色管理',
      },
      {
        id: 4,
        label: '菜单管理',
      },
    ],
  },
  {
    id: 2,
    label: '靶场管理',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
]


const formLabelWidth = '100px'
let timer




const loading = ref(false)
// 删除
const drawer1 = ref(false)

const rules = reactive<FormRules>({
  name: { required: true, message: '请输入角色名称' },
  miao: { required: true, message: '请输入角色描述' },
})

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
  drawerRef.value!.close()
}

// 新增角色
const dialog = ref(false)
const handleClose = (done) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('是否确认提交?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}
// 新增角色弹出框---取消事件
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}




// 编辑
const dialog1 = ref(false)
const handleClose1 = (done) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('是否确认提交?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}
// 编辑弹出框---取消事件
const cancelForm1 = () => {
  loading.value = false
  dialog1.value = false
  clearTimeout(timer)
}


interface DataType {
  key: string;
  roleName: string;//角色名称
  description?: string;//角色描述
  permissions: { permissionName: string; }[]//角色对应的权限列表
  createDate: string;//角色创建日期

}




const input = ref('')

=======
        <!-- 分页 -->
        <div class="paging">
            <div class="demo-pagination-block">
                <!-- <el-pagination layout=" prev, pager, next, jumper" :total="data.total" @current-change="handleCurrentChange" /> -->
                <el-pagination  v-model:page-size="params.size" layout="prev, pager, next" @current-change="handleCurrentChange" :total="data.total" />
              </div>
        </div>

  </div>
</template>


<script lang='ts' setup>

import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { pageByAllApi ,listRangesDataApi,findSearchConditionsApi} from '../../apis/ranges.js'
const router = useRouter()
const degree = ref([])
const classify = ref([])
const ftype = ref([])

// 表单
const formInline = reactive({
  name: "",
  degree:{
    name:""
  },
  classify:{
    name:""
  },
  ftype:{
    name:""
  }
})

interface DataType {
  id: string;
  //靶场名字
  name: string;
  //靶场难度
  level: string;
  //靶场分类
  category: string;
  //靶场文件类型
  fileType: string;
  //被谁创建的id(创建者可以删除自己创建的靶场)
  createBy: string;
}

//模拟的列表假数据
const data = reactive<{
  rangesdata: DataType[],
  total:number | null
}>({
  rangesdata: [],
  total:0
})



// 分页
const params = {
  pageNum: 1,
  size: 3
}

// 进入初始化数据
onMounted(() => {
  getData()

})

// 进入调接口
function getData() {
  pageByAllApi(params)
    .then((res:any) => {
      data.rangesdata = res.data.data.data
      // console.log(data.rangesdata);
     data.total=res.data.data.total
    })
    listRangesDataApi()
    .then((res:any)=>{
      degree.value = res.data.data.degree
      classify.value =res.data.data.classify
      ftype.value = res.data.data.ftype
      
    })
}


// 新增靶场跳转
function goRangesForm() {
  router.push("/nav/rangesform")
}


>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
// 删除
const handleDelete = (val: any) => {
  console.log("2" + val.name);

}

<<<<<<< HEAD
=======
// 分页
const handleCurrentChange = (val: number) => {
    params.pageNum = val
    getData()
}

// 搜索
function search() {
  console.log(formInline);
  findSearchConditionsApi(formInline)
  .then((res:any)=>{
    data.rangesdata = res.data.data
  })
  
}

function setTing() {
  getData()
}


>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9




</script>

<style lang='less' scoped>
<<<<<<< HEAD
=======
.el-form--inline .el-form-item{
  margin-right: 20px;
}
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
.user-content {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;

  .item {
<<<<<<< HEAD
    margin-bottom: 20px;

=======
display: flex;
justify-content: space-between;
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9


    .btn1 {
      width: 80px;
<<<<<<< HEAD
      height: 40px;
      line-height: 40px;
      border: none;
      margin-left: 20px;
      border-radius: 4px;
=======
      height: 32px;
      // line-height: 40px;
      border: none;
      margin-left: 20px;
      border-radius: 4px;
      margin-right: 20px;
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
    }

  }

  .el-input {
    width: 200px;
    height: 40px;
  }
}

.btn {
  width: 80px;
<<<<<<< HEAD
  height: 40px;
  line-height: 40px;
=======
  height: 32px;
  // line-height: 40px;
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  margin-left: 20px;
  border-radius: 4px;
<<<<<<< HEAD
=======

}

.btn2 {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  border-radius: 4px;
 
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
}

.newAdd {
  margin-bottom: 20px;
}
<<<<<<< HEAD
=======

.example-pagination-block+.example-pagination-block {
  margin-top: 10px;

}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
  justify-content: right;
}

.el-pagination {
  display: flex;
  justify-content: right;
  margin-right: 20px;
}


.paging {
   
   margin-bottom: 0.88rem;

   height: 1.5rem;
}
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
</style>